import { styled } from "styled-components";

export const HomeListv2Wrapper = styled.div`
  .content-list {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .home-item {
      display: flex;
      position: relative;
      align-items: center;
      width: 48%;
      height: 198px;
      background-color: skyblue;
      border-radius: 8px;
      overflow: hidden;

      .title-box {
        display: flex;
        height: 148px;
        width: 148px;
        align-items: center;
        flex-wrap: wrap;
        flex-shrink: 0;
        z-index: 22;

        .title {
            width: 50%;
            height: 50%;
            color: rgb(255, 255, 255);
            flex-shrink: 0;
            font-weight: 600;
            font-size: 64px;
            line-height: 48px;
            opacity: 0.96;
        }
      }

      .rcdbg {
        position: absolute;
        left: 0;
        top: 0;
        width: 120%;
        height: 120%;
        
      }

      .showdown {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(20px);
      }

       .rcmdBg-enter {
          .rcdbg {
            top: 0;
          }
      }

      .rcmdBg-enter-active {
        .rcdbg {
          top: -595px;
          transition: all 200ms;
        }
      }

      .rcmdBg-exit {
        .rcdbg {
          top: -595px;
        }
      }
      
      .rcmdBg-exit-active {
       .rcdbg {
          top: 0px;
          transition: all 200ms;
        }
      }
    }

     .coninter {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .n-avatar_cover {
        display: flex;
        position: relative;
        width: 100px;
        height: 100px;
        z-index: 22;
        

        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
          overflow: hidden;
        }
      }

      .coninter-right {
        display: flex;
        align-items: center;

        .play-icon {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all 500ms;
          right: -70px;
          width: 120px;
          height: 120px;
          opacity: 0;
          border-radius: 8px;
          background-color: rgba(255, 255, 255, .01);
          backdrop-filter: blur(20px);
          z-index: 33;

          img {
            width: 40px;
            height: 40px;
            cursor: pointer;
            transition: all 500ms;
          }
        }

        &:hover {
          .play-icon {
            opacity: 1;
            right: 14px;
            transform: scale(1.1);
          }
        }
      }

      .n-avatar_cover::before {
        content: "";
        border-radius: 8px;
        position: absolute;
        right: -6px;
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        opacity: 0.6;
        transform: scale(0.85) translate(11px);
        z-index: -1;
      }

      .n-avatar_cover::after {
        content: "";
        border-radius: 8px;
        width: 100%;
        height: 100%;
        position: absolute;
         right: -12px;
        background-color: rgb(255, 255, 255);
        position: absolute;
        transform: scale(0.7) translate(27px);
        opacity: 0.4;
        z-index: -2;
      }
    }

    .home-left {
      padding: 0 25px;
    }
  }
`